@using Volo.Abp.AspNetCore.Components
@inject INotificationAppService NotificationAppService
@inject INotificationIconComponentSelector NotificationIconComponentSelector
@inject INotificationDataComponentSelector NotificationDataComponentSelector
@inherits AbpComponentBase


@if (userNotifications != null && userNotifications.Any())
{    
    @foreach (var item in userNotifications)
    {
        var notificationIconComponent = NotificationIconComponentSelector.GetOrNull(item.NotificationName);
        var notificationDataComponent = NotificationDataComponentSelector.Get(item.Data.Type);
        var notificationDataParameters = new Dictionary<string, object>() {
            { "NotificationData",item.Data}
        };
        <Div Class="notification-item" Padding="Padding.Is3.OnX.Is2.FromTop" Flex="Flex.JustifyContent.Start">
            <Div Class="notification-icon" Border="Border.Rounded.Is1" Flex="Flex.AlignItems.Center.JustifyContent.Center" Margin="Margin.Is2.FromEnd" Position="Position.Relative">
                @if (notificationIconComponent == null)
                {
                    <DefaultNotificationIconComponent></DefaultNotificationIconComponent>
                }
                else
                {
                    <DynamicComponent Type="notificationIconComponent.GetType()"></DynamicComponent>
                }
                @if (item.State == Notifications.UserNotificationState.Unread)
                {
                    <Badge Color="Color.Danger" Pill Position="Position.Absolute.Top.Is0.Start.Is100.Translate.Middle" Border="Border.Light.OnAll.RoundedCircle" Padding="Padding.Is1">
                        <Span Visibility="Visibility.Invisible" Position="Position.Absolute">unread messages</Span>
                    </Badge>
                }
            </Div>
            <Div Flex="Flex.Grow.Is1">
                <Div Flex="Flex.JustifyContent.Between" Width="Width.Is100" TextColor="TextColor.Secondary">
                    <Small>
                        @(item.NotificationDisplayName.IsNullOrEmpty() ? item.NotificationName : item.NotificationDisplayName)
                    </Small>
                    <Small>@(FormatNotificationTime(item.CreationTime))</Small>
                </Div>
                <Div Class="notification-data">
                    @if (notificationDataComponent == null)
                    {
                        <Alert Color="Color.Warning">
                            <AlertMessage>
                                Notification data component of "@item.Data.Type" not found!
                            </AlertMessage>
                        </Alert>
                    }
                    else
                    {
                        <DynamicComponent Type="@notificationDataComponent.GetType()" Parameters="@notificationDataParameters"></DynamicComponent>
                    }                  
                </Div>
            </Div>
        </Div>
    }

    @if (skipCount < totalCount)
    {
        <Div Padding="Padding.Is3">
            <SubmitButton Clicked="@LoadMoreAsync" Block Color="Color.Secondary">
                @L["ButtonLoadMoreText"]
            </SubmitButton>
        </Div>
    }
}
else
{
    @if (!Loading)
    {
        <Div Padding="Padding.Is3.OnX.Is2.FromTop" TextColor="TextColor.Black50">
            @L["NoNotifications"]
        </Div>
    }
}

<Div Position="Position.Absolute.Start.Is0.Top.Is0" Width="Width.Is100">
    <Alert Color="Color.Warning" Visible="@Loading">
        <AlertDescription>
            @L["NotificationsLoadingText"]
        </AlertDescription>
    </Alert>
</Div>